<template>
  <div style="width:100%;height:100%;" v-loading="isLoading" element-loading-text="正在加载中..."
    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="layout-file" v-if="fileData.suffix == 'docx'">
      <vue-office-docx style="height: 100%;" :src="fileData.fileUrl" @rendered="rendered" @error="error" />
    </div>
    <div class="layout-file" v-else-if="fileData.suffix == 'xlsx'">
      <vue-office-excel style="height: 100%;" :src="fileData.fileUrl" @rendered="rendered" @error="error" />
    </div>
    <!-- <div class="layout-file" v-else-if="fileData.suffix == 'pdf'">
          <vue-office-pdf style="height: 100%;" :src="fileData.fileUrl" @rendered="rendered" />
        </div> -->
    <div class="layout-file" v-else-if="fileData.suffix == 'pptx'">
      <iframe style="width:100%;height:100%;border:none;" id="iframe" frameborder="0"
        :src="`/PPTXjs/index.html?file=` + fileData.fileUrl"></iframe>
    </div>
    <!-- <div class="layout-file" v-else> -->
    <div class="layout-file"
      v-else-if="['pdf', 'txt', 'md', 'jpg', 'jpeg', 'png', 'mp3', 'mp4'].includes(fileData.suffix)">
      <iframe style="width:100%;height:100%;border:none;" id="iframe" frameborder="0" :src="fileData.fileUrl"></iframe>
    </div>
    <div class="layout-file" v-else>
      <div style="margin:10px">该文件暂不支持预览，请下载后查看</div>
    </div>
  </div>
</template>

<script>
//引入相关样式
import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";

//引入VueOffice组件
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficePdf from "@vue-office/pdf";

export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf,
  },
  props: {
    fileData: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      isLoading: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    rendered() {
      // console.log("rendered");
      this.$message.success("页面预览成功");
      this.isLoading = false;
    },
    error(type) {
      // console.log("渲染失败", type);
      this.$message.warning("页面预览失败");
      this.isLoading = false;
    },
    init() {
      this.$nextTick(() => {
        if (["pdf", "txt", 'pptx', "md", "jpg", "jpeg", "png", "mp3", "mp4"].includes(this.fileData.suffix)) {
          this.isLoading = true;
          const iframe = document.getElementById("iframe");
          // attachEvent为IE专用方法
          if (iframe.attachEvent) {
            iframe.attachEvent("onload", function () {
              this.isLoading = false;
            });
          } else {
            iframe.onload = () => {
              this.isLoading = false;
            };
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.layout-file {
  width: 100%;
  height: 100%;
  /* width: 100vw;
  height: 100vh; */
  /* position: absolute;
  top: 0;
  left: 0;
  z-index: 999; */

  /* width: calc(50% - 1rem);
  height: 50%;
  float: left;
  margin-top: 0.8rem;
  margin-right: 0.8rem;
  position: relative;
  border: 1px solid #f00;
  border-radius: 0.3rem;
  &:nth-child(1),
  &:nth-child(2) {
    margin-top: 0;
  } */
}

.formBtnBox {
  position: absolute;
  bottom: 10%;
  left: 45%;
  z-index: 99;
  cursor: pointer;
}
</style>
